<script setup>
// import TheWelcome from '../components/TheWelcome.vue'
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { onMounted } from 'vue';
import { RectAreaLight } from 'three';
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';

import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff); // 设置背景颜色为灰色
// 如果需要设置透明度，可以使用半透明的颜色
// scene.background.setHex(0xffffff80);
RectAreaLightUniformsLib.init();
// scene.background = new THREE.Color( 0xffffff );

    // const grid = new THREE.GridHelper( 200, 40, 0xffffff, 0xffffff );
    // grid.material.opacity = 0.5;
    // grid.material.depthWrite = false;
    // grid.material.transparent = true;
    // scene.add( grid );

// 创建一个新的RectAreaLight实例  
const areaLight = new RectAreaLight(0x91D1FF, 30, 4, 4); // 色，亮度1，宽度10，高度10
// areaLight.power = 130;
// 设置光源位置  
areaLight.position.set(9, 5, -8); // 例如，设置在y轴上方10个单位的位置  
// areaLight.castShadow = true;
const areaLight2 = new RectAreaLight(0xAEE2FF, 6,4, 4); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight2.position.set(-8, 8, -3); // 例如，设置在y轴上方10个单位的位置  
// areaLight2.castShadow = true;

const areaLight3 = new RectAreaLight(0xE1DCFF, 2, 4, 4); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight3.position.set(-6, 8, 9); // 例如，设置在y轴上方10个单位的位置  
// areaLight3.castShadow = true;

const areaLight4 = new RectAreaLight(0xFFFFFF, 0.5, 8, 8); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight4.position.set(0, 5, 0); // 例如，设置在y轴上方10个单位的位置  
// areaLight4.castShadow = true;

const areaLight5 = new RectAreaLight(0xFF5400, 5, 0.6, 0.6); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight5.position.set(-1, 1.1, 2.1); // 例如，设置在y轴上方10个单位的位置  
// areaLight5.castShadow = true;
const areaLight6 = new RectAreaLight(0xFF5400, 5, 0.6, 0.6); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight6.position.set(-1, 1.1, -1.65); // 例如，设置在y轴上方10个单位的位置  
// areaLight6.castShadow = true;
const areaLight7 = new RectAreaLight(0xFF5400, 5, 0.6, 0.6); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight7.position.set(2.6, 1.1, 2.1); // 例如，设置在y轴上方10个单位的位置  
// areaLight7.castShadow = true;
const areaLight8 = new RectAreaLight(0xFF5400, 5, 0.6, 0.6); // 色，亮度1，宽度10，高度10
// 设置光源位置  
areaLight8.position.set(2.61, 1.1, -1.65); // 例如，设置在y轴上方10个单位的位置  
// areaLight8.castShadow = true;
const pointLight = new THREE.PointLight( 0x7CBFFF, 1, 4000 );
pointLight.position.set( 2, 2, -3 );
// pointLight.castShadow = true;
scene.add( pointLight );
const pointLight2 = new THREE.PointLight( 0x00D864, 1, 800 );
// pointLight2.castShadow = true;
pointLight2.position.set( -0.3, 4.6, -1.2 );
scene.add( pointLight2 );
const pointLight3 = new THREE.PointLight( 0x00D864, 1, 800 );
pointLight3.position.set( -0.3, 4.5, 1.4 );
// pointLight3.castShadow = true;
scene.add( pointLight3 );


// （可选）设置光源方向，使其指向某个点  
areaLight.angle = Math.PI / 6;
areaLight.lookAt(new THREE.Vector3(0, -15, 0)); // 例如，指向原点
areaLight2.lookAt(new THREE.Vector3(0, 0, 0)); // 例如，指向原点
areaLight3.lookAt(new THREE.Vector3(0, 0, 0)); // 例如，指向原点
areaLight4.lookAt(new THREE.Vector3(3, -1, 3)); // 例如，指向原点
areaLight5.lookAt(new THREE.Vector3(-1, 14.5, 2.1)); // 例如，指向原点
areaLight6.lookAt(new THREE.Vector3(-1, 14.5, -1.65)); // 例如，指向原点
areaLight7.lookAt(new THREE.Vector3(2.6, 14.5, 2.1)); // 例如，指向原点
areaLight8.lookAt(new THREE.Vector3(2.61, 14.5, -1.65)); // 例如，指向原点

scene.add(areaLight);
scene.add(areaLight2);
scene.add(areaLight3);
scene.add(areaLight4);
scene.add(areaLight5);
scene.add(areaLight6);
scene.add(areaLight7);
scene.add(areaLight8);

// 增加光源辅助
scene.add( new RectAreaLightHelper( areaLight ) );
// scene.add( new RectAreaLightHelper( areaLight2 ) );
// scene.add( new RectAreaLightHelper( areaLight3 ) );
// scene.add( new RectAreaLightHelper( areaLight4 ) );
// scene.add( new RectAreaLightHelper( areaLight5 ) );
// scene.add( new RectAreaLightHelper( areaLight6 ) );
// scene.add( new RectAreaLightHelper( areaLight7 ) );
// scene.add( new RectAreaLightHelper( areaLight8 ) );
//环境光:没有特定方向，整体改变场景的光照明暗
// const ambient = new THREE.AmbientLight(0xffffff, 0.4);
// scene.add(ambient);
// 添加平行光
const dirLight = new THREE.DirectionalLight( 0xffffff ,1);
dirLight.position.set( 0, 20, 10 );
// dirLight.castShadow = true;
dirLight.shadow.camera.top = 2;
dirLight.shadow.camera.bottom = - 2;
dirLight.shadow.camera.left = - 2;
dirLight.shadow.camera.right = 2;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 40;
scene.add( dirLight );
// //环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight(0Xffffff);
// scene.add(ambient);
const light = new THREE.HemisphereLight(  );

// light.castShadow = true;
scene.add( light );


// const camera = new THREE.OrthographicCamera(55, window.innerWidth / window.innerHeight,1, 100);
// 设置正交相机的宽高比为宽度：高度 = 16：9
const aspectRatio = 1;
 
// 设置相机的宽高比为正交比例
const camera = new THREE.OrthographicCamera(-aspectRatio*3.7, aspectRatio*4.3, 5.5, -2.5, 1, 2000);
// 创建一个CameraHelper对象来辅助显示相机
const cameraOrthoHelper = new THREE.CameraHelper( camera );

// 添加到场景中
scene.add(cameraOrthoHelper);
// camera.position.set( 0, 0, 0 );
camera.position.set( 14, 11, 13 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
const renderer = new THREE.WebGLRenderer( { antialias: true ,alpha:true} );
// var pmremGenerator = new THREE.PMREMGenerator(renderer);
// var pmrem = pmremGenerator.fromScene(scene, 0.5, 0.1, 1000); // 示例参数
// scene.environment = pmrem.texture;

// renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(360, 360);

renderer.render(scene, camera);  
// console.log(renderer.domElement);
// document.querySelectorAll('.container').appendChild(renderer.domElement);
var clock = new THREE.Clock();
// 创建GLTF加载器对象
const loader = new GLTFLoader();
// 渲染循环  

let mixer = null
loader.load( '/gltf/icon.glb', function ( gltf ) {
  // console.log('控制台查看加载gltf文件返回的对象结构',gltf);
  // console.log('gltf对象场景属性',gltf.scene);
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add(gltf.scene);
  // 获取动画混合器  
  mixer = new THREE.AnimationMixer(gltf.scene);  
  gltf.scene.traverse((child) => {  
    if (child.isMesh) {  
        let material = child.material; // 或者 child.materials[i]，如果是多材质  
        if(material.name=='2.white metal.016'){
          // console.log('立方体.315',material.color)
          material.emissive.copy(material.color)
          material.emissiveIntensity = 0.3
        }
        // console.log(material.name);
        if(material.name=='材质.042'){
          material.emissive=new THREE.Color( 0xFF511C );
          material.emissiveIntensity = 1
        }
        if(material.name="2.grey metal.080"){
          material.envMapIntensity = 5;
        // 启用高光反射
        material.specular = new THREE.Color(0xffffff);
        material.shininess = 30;
          // console.log('2.grey metal.080"',material)
        }
        // console.log(material);
        // 如果材质支持自发光属性  
        if (material.emissive !== undefined) {  
            // 假设我们想要将自发光颜色设置为与漫反射颜色相同  
            // material.emissive.copy(material.color); // 或者设置为特定的颜色：material.emissive.set(r, g, b)  
            // material.emissive = material.color
            // 如果你想要移除自发光效果，可以这样做：  
            // material.emissive.set(0, 0, 0); // 设置为黑色  
            // 或者  
            // material.emissiveIntensity = 0; // 将自发光强度设置为0  
        }  
    }  
});  
  // 假设模型有一个名为'AnimationName'的动画  
  gltf.animations.forEach(function (animation) {  
    var action = mixer.clipAction(animation);  
    // 播放动画  // 设置动画只播放一次  
    // action.loop = THREE.LoopOnce;  
    action.play(); 
  });
  // 递归遍历所有模型节点批量修改材质
gltf.scene.traverse(function(obj) {
    if (obj.isMesh) {//判断是否是网格模型
        // console.log('模型节点',obj);
        // console.log('模型节点名字',obj.name);
        // console.log('material',obj.material)
        // obj.material = new THREE.MeshLambertMaterial({
        //   type:'MeshPhysicalMaterial',
        // });
    }
});
        
  // console.log(action); 

  // renderer.render(scene, camera);  
})

const controls = new OrbitControls(camera, renderer.domElement);  
function animate() {  
    requestAnimationFrame(animate);  
    // 浏览器控制台查看相机位置变化
    // console.log('camera.position',camera.position);
    var delta = clock.getDelta();  
    mixer && mixer.update(delta);
    controls.update(); // 更新控件  
    renderer.render(scene, camera);  
}  
animate();
onMounted(() => {
  document.querySelector('.container').appendChild(renderer.domElement);
})
</script>

<template>
  <main>
    <div class="container"></div>
  </main>
</template>
